<template>
  <div class="Maintain">
    <div class="head">
      <van-nav-bar title="意见反馈" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="input">
      <div class="text1">
        <van-field v-model="message" rows="6" autosize
          type="textarea" maxlength="150" placeholder="请留下您宝贵的意见" show-word-limit/>
      </div>
      <van-uploader class="upploader" preview-size="95px"
       v-model="fileList" :max-count="5" multiple />
    </div>
    <div class="submit">
      <van-button size="large" color="linear-gradient(to right, #ff6034, #ee0a24)" @click="summit">
        提交
      </van-button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Field, Uploader, Button, Toast } from 'vant'
Vue.use(NavBar).use(Field).use(Uploader).use(Button).use(Toast)
export default{
  name: 'Feedback',
  data () {
    return {
      message: '',
      fileList: [
      ]
    }
  },
  methods: {
    // 返回首页
    onClickLeft () {
      this.$router.back(-1)
    },
    summit () {
      if (this.message === '') {
        Toast('您还没填写内容')
      } else {
        this.message = ''
        this.fileList.splice(0, this.fileList.length)
        Toast('提交成功')
      }
    }
  }
}
</script>

<style scoped>
.upploader{
  margin-left: 10px;
  display: flex;
   align-items: center;
   justify-content: left;
}
.submit{
  margin-top: 10px;
}
</style>
